import { FC, SVGProps } from 'react'

export const FlexDapps: FC<SVGProps<SVGSVGElement>> = ({ id, ...props }) => {
  const fillId = `fill-${id}`
  const imageId = `img-${id}`

  return (
    <svg
      width="189"
      height="189"
      viewBox="0 0 189 189"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      {...props}
    >
      <circle cx="94.5704" cy="94.5882" r="94.0704" fill="#2B333F" />
      <rect x="19" y="18" width="151" height="151" rx="100" fill={`url(#${fillId})`} />
      <defs>
        <pattern
          id={fillId}
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
          className="animate-maintain-svg"
        >
          <use xlinkHref={`#${imageId}`} transform="scale(0.0025)" />
        </pattern>
        <image
          id={imageId}
          width="400"
          height="400"
          xlinkHref=""
        />
      </defs>
    </svg>
  )
}

export default FlexDapps
